var Log = {
	elem: $('log'),
	write: function(text) {
		if(!this.elem) this.elem = $('log');
		this.elem.set('html', text);
	}
};


var rgraph;

function init(json) {
	//computes page layout (not a library function, used to adjust some css thingys on the page)
	Infovis.initLayout();
	 //Hash to store label effects
	 var effectHash = {};
	//Set node interpolation to linear (can also be setted to 'polar')
	Config.interpolation = "linear";
	//Set distance for concentric circles
	Config.levelDistance = 100;
	//Set number of concentric circles, default's to six.
	Config.drawConcentricCircles = 4;
	

	var canvas= new Canvas('infovis', '#ccddee', '#772277');

	rgraph= new RGraph(canvas,  {
	  	onBeforeCompute: function(node) {
	  		Log.write("centering " + node.name + "...");
	  		$('details').set("html", "Entries from " + node.name);
	  		setTimeout('load_person_details("' + node.name + '")', 300);
	  		/*
			var _self = this;
			var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
			html += "<ul>";
			GraphUtil.eachAdjacency(rgraph.graph, node, function(adj) {
				var child = adj.nodeTo;
				if(child.data && child.data.length > 0) {
					html += "<li>" + child.name + " " + "<div class=\"relation\">(relation: " + _self.getName(node, child) + ")</div></li>";
				}
			});
			html+= "</ul>";
			$('inner-details').set("html", html);
			*/
	  	},
	  	
	  	getName: function(node1, node2) {
	  		for(var i=0; i<node1.data.length; i++) {
	  			var dataset = node1.data[i];
	  			if(dataset.key == node2.name) return dataset.value;
	  		}
	  		
			for(var i=0; i<node2.data.length; i++) {
	  			var dataset = node2.data[i];
	  			if(dataset.key == node1.name) return dataset.value;
	  		}
	  	},
	  	
	  //Add a controller to assign the node's name to the created label.	
	onCreateLabel: function(domElement, node) {
		var d = $(domElement);
		effectHash[node.id] = new Fx.Tween(d, {property:'opacity', duration:300, transition:Fx.Transitions.linear, wait:false});
		d.setOpacity(0.6);
		d.set('html', node.name).addEvents({
			'mouseenter': function() {
				effectHash[node.id].start(0.6, 1);
			},
			
			'mouseleave': function() {
				effectHash[node.id].start(1, 0.6);
			},
			
			'click': function() {
				rgraph.onClick(d.id);
			}
		});
		
	},
	
	//Take off previous width and height styles and
	//add half of the *actual* label width to the left position
	// That will center your label (do the math man). 
	onPlaceLabel: function(domElement, node) {
		domElement.innerHTML = '';
		 if(node._depth <= 1) {
			domElement.innerHTML = node.name;
			var left = parseInt(domElement.style.left);
			domElement.style.width = '';
			domElement.style.height = '';
			var w = domElement.offsetWidth;
			domElement.style.left = (left - w /2) + 'px';
	
		} 
	},
	
	onAfterCompute: function() {
		Log.write("done");
		}
	  	
	  });
	    
	load_graph(json);
	
	  rgraph.controller.onBeforeCompute(GraphUtil.getNode(rgraph.graph, rgraph.root));
	  rgraph.controller.onAfterCompute();
}


function clear_graph() {
     GraphUtil.eachNode(this.rgraph.graph, function(nodeToDelete){
		try{
			delete this.rgraph.graph.nodes[nodeToDelete];
			//this.computeThenPlot();
			//document.getElementById(nodeToDelete).style.display = 'none'; //disable the item holding this
		}catch(e){alert(e);};
		
    });
}

function load_graph(json) {
	  //load tree from tree data.
	  rgraph.loadTreeFromJSON(json);
	  //compute positions
	  rgraph.compute();
	  //make first plot
	  rgraph.plot();					   
}